<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="searchCondition" label-width="auto" style="max-width: 600px" inline>
        <el-form-item label="老虎名字">
          <el-input v-model="searchCondition.tigerName"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="large" @click="submitClickHandler">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <el-table :data="tigerList" stripe border style="width: 100%">
        <el-table-column prop="tigerId" label="编号" width="180"/>
        <el-table-column prop="tigerName" label="名字" width="180"/>
        <el-table-column prop="tigerAge" label="年龄"/>
        <el-table-column prop="tigerSalary" label="工资"/>
        <el-table-column label="操作" #default="scope">
          <el-button type="primary" size="large" :icon="Edit" @click="editClickHandler(scope.row)">编辑</el-button>
          <el-button type="danger" size="large" :icon="Delete" @click="deleteClickHandler(scope.row)">删除</el-button>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="18">
      <el-pagination
          background
          size="large"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[2, 5, 10]"
          :total="totalRecord"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="loadPageData"
          @size-change="handleSizeChange"
      />
    </el-col>
    <el-col :span="6">
      <el-button type="primary" @click="reloadDataClickHandler" size="large" :icon="Refresh">重新加载数据并重置分页条件</el-button>
    </el-col>
  </el-row>
</template>

<script setup>
// ------------------------导入区------------------------
import {onMounted, reactive, ref} from "vue";
import {Edit, Delete, Refresh} from "@element-plus/icons-vue"
import {ElMessage, ElMessageBox} from "element-plus";
import axiosInstance from "../config/axios.js";
import {useRouter} from "vue-router";
import pageStore from "../config/store.js";

// ------------------------数据区------------------------
let currentPage = ref(1);
let pageSize = ref(10);

// 真正的 totalRecord 总记录数需要从后端加载到数据时才知道具体是多少，这里 0 是初始值
let totalRecord = ref(0);

let tigerList = reactive([]);

let searchCondition = reactive({});

let router = useRouter();

let globalPageInfo = pageStore();

// ------------------------功能区------------------------
onMounted(() => {
  reloadData();
});

const loadPageData = () => {
  // 修改全局范围的页码
  globalPageInfo.storedPageNum = currentPage.value;

  // 基于全局范围内修改之后的数据，重新加载分页组件以及数据表格
  reloadData();
}

const handleSizeChange = () => {
  // 修改全局范围的页容量
  globalPageInfo.storedPageSize = pageSize.value;

  // 基于全局范围内修改之后的数据，重新加载分页组件以及数据表格
  reloadData();
}

const deleteClickHandler = (row) => {
  let message = `您真的要删除【${row.tigerName}】这条记录吗？`;
  let title = '系统提示';
  let confirmConfig = {confirmButtonText: '确定删除', cancelButtonText: '我点错了，不删除', type: 'warning'};

  ElMessageBox.confirm(message, title, confirmConfig)
      .then(async () => {await axiosInstance.delete(`/tiger/${row.tigerId}`)})
      .then(() => {ElMessage.success("Oh yeah!删除成功！")})
      .then(async () => {await reloadData();});
}

const editClickHandler = (row) => {
  router.push(`/edit?tigerId=${row.tigerId}`);
}

const reloadData = async () => {
  let {data} = await axiosInstance.get(`/tiger/page/${globalPageInfo.storedPageNum}/${globalPageInfo.storedPageSize}`, {
    params: {
      tigerName: globalPageInfo.storedTigerName
    }
  });

  tigerList.splice(0, tigerList.length);

  // data：整个响应体，对应 Result 数据结构
  // data.data：PageInfo 数据结构
  // data.data.list：PageInfo 中的 list 属性
  tigerList.push(...data.data.list);

  // 给分页组件中的响应式数据重新赋值：
  // 给 totalRecord 总记录数赋值
  totalRecord.value = data.data.total;

  // 给 currentPage 当前页码重新赋值
  currentPage.value = globalPageInfo.storedPageNum;

  // 给 pageSize 页容量重新赋值
  pageSize.value = globalPageInfo.storedPageSize;

  // 使用 Pinia 全局数据给搜索框也进行重置
  searchCondition.tigerName = globalPageInfo.storedTigerName;

  ElMessage.success("Oh yeah!分页列表加载成功！");
}

const reloadDataClickHandler = () => {
  globalPageInfo.$reset();
  reloadData();
}

const submitClickHandler = () => {
  globalPageInfo.storedTigerName = searchCondition.tigerName;

  reloadData();
}
</script>

<style scoped>

</style>